<template>
  <div class="AppointmentApplyClass">
    <c-title :hide="false" :text="'申请项目分类代理'"></c-title>

    <template v-if="status == 1">
      <div class="group">
        <div class="line" @click="show = true">
          <div class="line_l">项目分类</div>
          <!-- <div class="line_c">请选择</div> -->
          <van-field v-model="projectName" placeholder="请选择" readonly />
          <div class="line_r">
            <i class="iconfont icon-advertise-next"></i>
          </div>
        </div>
        <div class="line" @click="selshow = true">
          <div class="line_l">代理等级</div>
          <van-field v-model="selectLevel.name" placeholder="请选择" readonly />
          <div class="line_r">
            <i class="iconfont icon-advertise-next"></i>
          </div>
        </div>
        <div class="line" @click="proshow = true" v-if="prozoneshow">
          <div class="line_l">省级区域</div>
          <van-field v-model="provicevalue" placeholder="请选择" readonly />
          <div class="line_r">
            <i class="iconfont icon-advertise-next"></i>
          </div>
        </div>
        <div class="line" @click="showCity" v-if="cityzoneshow">
          <div class="line_l">市级区域</div>
          <van-field v-model="cityvalue" placeholder="请选择" readonly />
          <div class="line_r">
            <i class="iconfont icon-advertise-next"></i>
          </div>
        </div>
        <div class="line" @click="showReg" v-if="regzoneshow">
          <div class="line_l">区级区域</div>
          <van-field v-model="regionvalue" placeholder="请选择" readonly />
          <div class="line_r">
            <i class="iconfont icon-advertise-next"></i>
          </div>
        </div>
        <!-- <div class="line" @click="showStr" v-if="strshow">
          <div class="line_l">街道/乡镇区域</div>
          <van-field v-model="streetvalue" placeholder="请选择" readonly />
          <div class="line_r">
            <i class="iconfont icon-advertise-next"></i>
          </div>
        </div> -->
      </div>
      <div class="btnBox set-pc-style">
        <div class="btn" @click="tapSubmit">提交</div>
      </div>
    </template>
    <template v-else>
      <div class="statusBox">
        <div class="image">
          <img :src="imgFail" alt="" />
        </div>
        <span class="tips">您的申请已被驳回</span>
        <div class="statusBtn" @click="Reapply">重新申请</div>
      </div>
    </template>
    <van-popup v-model="show" round position="bottom" :style="{ height: '15.31rem' }">
      <van-picker title="选择分类" show-toolbar :columns="columns" @confirm="onClickRight" @cancel="onClickLeft" @change="onChange" />
    </van-popup>
    <van-popup v-model="selshow" position="left" style="width: 100%; height: 100%;" popup-transition="popup-fade">
      <van-nav-bar title="代理等级">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="selshow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <van-cell is-link title-style="text-align:left" v-for="(item, i) in level" :key="i" @click.native="selConfirm(item)">
        <span slot="title">{{ item.name }}</span>
      </van-cell>
    </van-popup>
    <van-popup v-model="proshow" position="left" style="width: 100%; height: 100%;" popup-transition="popup-fade">
      <van-nav-bar title="省级区域">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="proshow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <!-- <div style="clear:both;margin-top:40px;"></div> -->
      <div class="scroll">
        <van-cell is-link title-style="text-align:left" v-for="(item, i) in provinceoptions" :key="i" @click.native="selectProviceHandle(item)">
          <span slot="title">{{ item.areaname }}</span>
        </van-cell>
      </div>
    </van-popup>
    <van-popup v-model="cityshow" position="left" style="width: 100%; height: 100%;" popup-transition="popup-fade">
      <van-nav-bar title="市级区域">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="cityshow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <!-- <div style="clear:both;margin-top:40px;"></div> -->
      <div class="scroll">
        <van-cell is-link title-style="text-align:left" v-for="(item, i) in cityoptions" :key="i" @click.native="selectCityHandle(item)">
          <span slot="title">{{ item.areaname }}</span>
        </van-cell>
      </div>
    </van-popup>
    <van-popup v-model="regshow" position="left" style="width: 100%; height: 100%;" popup-transition="popup-fade">
      <van-nav-bar title="区/县级区域">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="regshow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <!-- <div style="clear:both;margin-top:40px;"></div> -->
      <div class="scroll">
        <van-cell is-link title-style="text-align:left" v-for="(item, i) in regionoptions" :key="i" @click.native="selectRegionHandle(item)">
          <span slot="title">{{ item.areaname }}</span>
        </van-cell>
      </div>
    </van-popup>
    <van-popup v-model="streetshow" position="left" style="width: 100%; height: 100%;" popup-transition="popup-fade">
      <van-nav-bar title="街道/乡镇区域">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="streetshow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <div style=" height: 90%; overflow-y: scroll;">
        <van-cell is-link title-style="text-align:left" v-for="(item, i) in stroptions" :key="i" @click.native="selectStrionHandle(item)">
          <span slot="title">{{ item.areaname }}</span>
        </van-cell>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      classArr: [],
      projectName: "",
      selshow: false,
      show: false,
      columns: ["分类一", "上面服务"],
      level: [
        { name: "省级代理", tag: 1 },
        { name: "市级代理", tag: 2 },
        { name: "区/县级代理", tag: 3 }
        // { name: "街道代理", tag: 4 }
      ],
      proshow: false,
      cityshow: false,
      regshow: false,
      // strshow: false,

      provinceoptions: [],
      cityoptions: [],
      regionoptions: [],
      stroptions: [],

      prozoneshow: false,
      cityzoneshow: false,
      regzoneshow: false,
      streetshow: false,

      provicevalue: "",
      cityvalue: "",
      regionvalue: "",
      selectLevel: "",
      streetvalue: "",

      districtObject: "",
      provicevalue_id: "",
      cityvalue_id: "",
      regionvalue_id: "",
      streetvalue_id: "",
      status: 1,
      imgFail: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FagentShop%2F%E7%AD%89%E5%BE%85%E5%AE%A1%E6%A0%B8%402x%20(1).png"
    };
  },
  activated() {
    this.getInfo();
    this.initData();
    this.projectClass();
  },
  methods: {
    Reapply() {
      this.status = 1;
    },
    async getInfo() {
      let { msg, data, result } = await $http.post("plugin.appointment.frontend.member.get-info", {}, ".");
      if(result){
        if (data.is_agent_apply.status == 4) {
          this.status = 0;
        }
      }
    },
    async tapSubmit() {
      if (!this.projectName) {
        this.$toast("请先选择项目");
        return;
      }
      let json = {
        form: {
          category_id: this.classArr[this.projectSelectInd].id,
          area_id: "",
          area_level: this.selectLevel.tag
        }
      };
      if (this.selectLevel.tag == 1) {
        if (!this.provicevalue_id) {
          this.$toast("请先选择所代理区域");
          return;
        }
        json.form.area_id = this.provicevalue_id;
      } else if (this.selectLevel.tag == 2) {
        if (!this.cityvalue_id) {
          this.$toast("请先选择所代理区域");
          return;
        }
        json.form.area_id = this.cityvalue_id;
      } else if (this.selectLevel.tag == 3) {
        if (!this.regionvalue_id) {
          this.$toast("请先选择所代理区域");
          return;
        }
        json.form.area_id = this.regionvalue_id;
      } else if (this.selectLevel.tag == 4) {
        if (!this.streetvalue_id) {
          this.$toast("请先选择所代理区域");
          return;
        }
        json.form.area_id = this.streetvalue_id;
      }
      let { msg, data, result } = await $http.post("plugin.appointment.frontend.category-agent.apply", json, ".");
      if (!result) return this.$toast(msg);
      this.$router.go(-1);
    },
    async projectClass() {
      let { msg, data, result } = await $http.post("plugin.appointment.frontend.project-category.get-list", {}, ".");
      if (!result) return this.$toast(msg);
      if (data.length > 0) {
        let array = [];
        for (let i = 0; i < data.length; i++) {
          array.push(data[i].name);
        }
        this.columns = array;
        this.classArr = data;
      }
    },
    //初始化数据
    initData() {
      console.log(22);
      var province = localStorage.getItem("province");
      if (this.fun.isTextEmpty(province)) {
        this.getAddressDataInfo(); //获取地址json数据
      } else {
        this.initProvice();
      }
    },
    //初始化省数据
    initProvice() {
      var province = localStorage.getItem("province");
      var provinces = [];
      provinces = JSON.parse(province);
      this.provinceoptions = provinces;
    },
    //获取地址信息
    getAddressDataInfo() {
      let that = this;
      $http
        .get(
          "member.member-address.address",
          {
            i: this.fun.getKeyByI(),
            type: this.fun.getTyep()
          },
          ""
        )
        .then(
          response => {
            if (response.result == 1) {
              var province = JSON.stringify(response.data.province);
              var city = JSON.stringify(response.data.city);
              var district = JSON.stringify(response.data.district);
              localStorage.setItem("province", province);
              localStorage.setItem("city", city);
              localStorage.setItem("district", district);

              //初始化数据
              that.initProvice();
            } else {
              that.$dialog.alert({ message: response.msg });
            }
          },
          function(response) {
            that.$dialog.alert({ message: response.msg });
          }
        );
    },

    showCity() {
      console.log(this.provicevalue);
      if (this.fun.isTextEmpty(this.provicevalue)) {
        this.$toast("请选择省级区域");
        return;
      }

      this.cityshow = true;
    },
    showReg() {
      if (this.fun.isTextEmpty(this.provicevalue)) {
        this.$toast("请选择省级区域");
        return;
      }

      if (this.fun.isTextEmpty(this.cityvalue)) {
        this.$toast("请选择市级区域");
        return;
      }

      this.regshow = true;
    },
    showStr() {
      if (this.fun.isTextEmpty(this.provicevalue)) {
        Toast("请选择省级区域");
        return;
      }

      if (this.fun.isTextEmpty(this.cityvalue)) {
        this.$toast("请选择市级区域");
        return;
      }

      if (this.fun.isTextEmpty(this.regionvalue)) {
        this.$toast("请选择区/县级区域");
        return;
      }

      this.streetshow = true;
    },
    onChange(val) {
      console.log(this.columns, "dddd", val);
    },
    onClickLeft() {
      this.show = false;
    },
    onClickRight(val, ind) {
      this.show = false;
      this.projectName = val;
      this.projectSelectInd = ind;
      // console.log(val, ind);
    },
    selConfirm(value) {
      console.log(value);
      this.selshow = false;
      this.selectLevel = value;
      switch (this.selectLevel.tag) {
        case 1:
          this.prozoneshow = true;
          this.cityzoneshow = false;
          this.regzoneshow = false;
          // this.strshow = false;
          break;
        case 2:
          this.prozoneshow = true;
          this.cityzoneshow = true;
          this.regzoneshow = false;
          // this.strshow = false;
          break;
        case 3:
          this.prozoneshow = true;
          this.cityzoneshow = true;
          this.regzoneshow = true;
          // this.strshow = false;
          break;
        // case 4:
        //   this.prozoneshow = true;
        //   this.cityzoneshow = true;
        //   this.regzoneshow = true;
        //   this.strshow = true;
        //   break;
        default:
          break;
      }
    },
    selectProviceHandle(value) {
      //初始化一些默认值 避免逻辑错误
      this.cityoptions = [];
      this.regionoptions = [];
      this.cityvalue = "";
      this.regionvalue = "";
      this.provicevalue_id = "";
      this.cityvalue_id = "";
      this.regionvalue_id = "";
      this.streetvalue_id = "";

      this.proviceObject = value;
      this.cityoptions = [];
      var citys = JSON.parse(localStorage.getItem("city"));
      for (let i = 0; i < citys.length; i++) {
        if (citys[i].parentid == value.id) {
          this.cityoptions.push(citys[i]);
        }
      }
      this.provicevalue_id = value.id;
      this.provicevalue = value.areaname;

      this.proshow = false;
    },
    //选择市的响应方法
    selectCityHandle(value) {
      this.cityObject = value;
      console.log("selectCityHandle", value);
      this.regionoptions = [];
      var districts = JSON.parse(localStorage.getItem("district"));
      for (let i = 0; i < districts.length; i++) {
        if (districts[i].parentid == value.id) {
          this.regionoptions.push(districts[i]);
        }
      }

      this.cityvalue = value.areaname;
      this.cityvalue_id = value.id;
      this.cityshow = false;
    },
    //选择市辖区的响应方法
    selectRegionHandle(value) {
      console.log(value);
      this.regionObject = value;

      this.regionvalue = value.areaname;
      this.regionvalue_id = value.id;

      this.regshow = false;

      this.stroptions = [];

      // this.isStreetShow(value.id);
    },
    //判断是否开启街道
    // isStreetShow(value) {
    //   if (this.selectLevel.tag != 4) {
    //     return;
    //   }
    //   $http
    //     .get("member.memberAddress.street", { district_id: value })
    //     .then(response => {
    //       console.log(response);
    //       if (response.result == 1) {
    //         if (!this.fun.isTextEmpty(response.data) && response.data.length > 0) {
    //           this.stroptions = response.data;
    //           this.strshow = true;
    //         } else {
    //           this.strshow = false;
    //           this.$toast("暂无街道数据");
    //           return;
    //         }
    //       } else {
    //         this.strshow = false;
    //         this.$toast("尚未开启街道");
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    selectStrionHandle(value) {
      this.districtObject = value;

      this.streetvalue = value.areaname;
      this.streetvalue_id = value.id;

      this.streetshow = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.group {
  margin: 0.63rem 0.72rem;
  background: #ffffff;
  border-radius: 0.5rem;
  .line {
    margin: 0 0.75rem;
    padding: 1.16rem 0;
    display: flex;
    justify-content: space-between;
    text-align: left;
    border-bottom: 1px solid #f0f0f1;
    .van-cell {
      padding: 0;
    }
    .line_l {
      font-size: 0.88rem;
      width: 5.5rem;
      flex-shrink: 0;
    }
    .line_c {
      font-size: 0.88rem;
      color: #aaaab3;
      flex: 1;
    }
    .line_r {
      color: #aaaab3;
    }
  }
  .line:last-child {
    border-bottom: 0;
  }
}
.btnBox {
  position: fixed;
  bottom: 1.25rem;
  left: 0;
  width: 100%;
  .btn {
    // width: 21.94rem;
    margin: 0 0.75rem;
    background: #f15353;
    border-radius: 1.88rem;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 500;
    padding: 0.78rem 0;
    box-sizing: border-box;
  }
}
.statusBox {
  width: 21.94rem;
  height: 16.78rem;
  background: #ffffff;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin: 0.63rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .image {
    width: 6.66rem;
    height: 6.66rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tips {
    font-size: 0.88rem;
    color: #00001c;
    text-align: center;
    margin: 0.72rem 0 1.88rem 0;
  }
  .statusBtn {
    width: 6.69rem;
    height: 2.5rem;
    background: #f15353;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.25rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #ffffff;
  }
}
</style>
